
<template>
	<div class="userVip-main">
		<div class="userVip-user-msg">
			<div class="user-msg-img">
				<img src="../../../static/imgs/253226768430266496.png" alt="" title=""/>
			</div>
			<p>{{user.mobile}} ({{user.name}})</p>
			<div class="user-vip-type">
				<a>会员类型:</a>
				<a>{{user.memberValid?'会员用户':'普通用户'}}</a>
			</div>
			<div class="user-btn-vip">
				<span>升级超级VIP</span>
			</div>
		</div>
		<!-- banner -->
		<div class="userVip-banner">
			<img src="../../../static/imgs/haibao.png" alt="" title=""/>
		</div>
		<!-- tab -->
		<div class="userVip-tab">
			<div class="userVip-b">
				<div class="userVip-div">
					<a class="border-active">VIP特權</a>
				</div>
				<div class="userVip-div">
					<a>會員充值歷史記錄</a>
				</div>
			</div>
			<!-- 切換 -->
			<div class="userVip-con">
				<div class="userVip-box">
					<div class="user-border"></div>
					<div class="userVip-t">VIP优势一览表</div>
					<div class="user-border user-border-right"></div>
				</div>
				<!-- table -->
				<div class="userVIP-tab">
					<table>
						<tr>
							<th>VIP类型</th>
							<th>普通会员</th>
							<th>普通VIP</th>
							<th>超级VIP</th>
						</tr>
						<tr>
							<td>
								每个平台绑定账号数
							</td>
							<td>
								1
							</td>
							<td>
								2
							</td>
							<td>
								3
							</td>
						</tr>
						<tr>
							<td>
								可接单数量(日/周/月)
							</td>
							<td>
								3/15/45
							</td>
							<td>
								4/20/60
							</td>
							<td>
								5/30/90
							</td>
						</tr>
						<tr>
							<td>
								接单年龄限制解除
							</td>
							<td>
								<img src="../../../static/imgs/VIPchacha.png" alt="" title=""/>
							</td>
							<td>
								<img src="../../../static/imgs/VIPgougou.png" alt="" title=""/>
							</td>
							<td>
								<img src="../../../static/imgs/VIPgougou.png" alt="" title=""/>
							</td>
						</tr>
						<tr>
							<td>
								无限制类目标签
							</td>
							<td>
								<img src="../../../static/imgs/VIPchacha.png" alt="" title=""/>
							</td>
							<td>
								<img src="../../../static/imgs/VIPchacha.png" alt="" title=""/>
							</td>
							<td>
								<img src="../../../static/imgs/VIPgougou.png" alt="" title=""/>
							</td>
						</tr>
						<tr>
							<td>
								升级方式
							</td>
							<td>
								无
							</td>
							<td>
								通过完成指定量的浏览任务/平台赠送可自动升级为普通VIP
							</td>
							<td>
								仅支持通过充值升级为超级VIP
							</td>
						</tr>
					</table>
				</div>
				<div class="userVip-box">
					<div class="user-border"></div>
					<div class="userVip-t">VIP具体说明</div>
					<div class="user-border user-border-right"></div>
				</div>
				<div class="user-Vip-text">
					<div class="user-Vip-text-box">
						<p>
							1.普通会员在<a>7天内完成60单浏览任务(且订单状态为已完成)</a>可自动升级为普通VIP，普通VIP的期限为1个月，普通VIP时间不叠加，如若普通VIP过期，可继续在7天内完成30单浏览任务延续。
						</p>
						<p>
							2.平时表现积极，也可以向平台管理员申请普通VIP哟。
						</p>
						<p>
							3.超级VIP用户高佣金任务优先展示。
						</p>
						<p style="color: red;">
							PS.充值VIP费用：190元/半年，320元/一年
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>



<script>

	import IndexFooter from '@/components/base/IndexFooter'
  import {mapGetters} from 'vuex'
	export default {
		name: 'userVip',
    computed:{
      ...mapGetters([
        'user'
      ])
    },
		components: {
			IndexFooter
		}
	}
</script>

<style scoped>
	.user-Vip-text{
		width: 100%;
		float:left;
	}
	.user-Vip-text-box{
		width: 96%;
		margin: 0 auto;
	}
	.user-Vip-text p{
		width: 100%;
		margin-bottom: 0.1rem;
		line-height: 0.22rem;
		color: #333;
		font-size: 0.14rem;
	}
	.user-Vip-text p a{
		color: #ff933f;
	}
	.userVIP-tab{
		width: 96%;
	    min-height: 30px;
	    line-height: 22px;
	    text-align: center;
	    border-collapse: collapse;
	    background: rgb(142,10,190);
	    margin: 0 auto;
	    font-size: 12px;
	    color: white;
	    border-radius: 8px;
	}
	.userVIP-tab tr th{
		width:25%;
		color: white;
		padding: 0.1rem 0;
		font-size: 0.12rem;
		border-right: 0.01rem solid white;
		border-bottom: 0.01rem solid white;
		font-weight: bold;
	}
	.userVIP-tab tr th:last-child{
		color: #ffe067;
		width: 24%;
		border-right: inherit;
	}
	.userVIP-tab tr td{
		border-right: 0.01rem solid white;
		border-bottom: 0.01rem solid white;
		padding: 0.1rem 0.05rem;
	}
	.userVIP-tab tr td img{
		width: 30%;
		padding-top: 0.05rem;
	}
	.userVip-con{
		width: 100%;
		height: 100%;
		float:left;
	}
	.userVip-box{
		width: 70%;
		margin: 0 auto;
		height: 0.19rem;
		padding: 0.1rem 0;
	}
	.user-border{
		float:left;
		width: 0.6rem;
		height: 0.01rem;
		background: #4097FF;
		margin-top: 0.07rem;
	}
	.userVip-t{
		text-align: center;
		color: #4097FF;
		float:left;
		margin-left: 0.25rem;
		font-size: 0.14rem;
		font-weight: bold;
	}
	.user-border-right{
		float:right;
	}
.userVip-tab{
	width: 100%;
	height: 100%;
	float:left;
	margin-top: 0.1rem;
}
.userVip-b{
	width: 100%;
	height: 0.28rem;
	line-height: 0.28rem;
}
.userVip-div{
    font-size: 0;
    width: 50%;
    float:left;
    text-align: center;
    box-sizing: border-box;
}
.userVip-div a{
	font-size: 0.12rem;
    display: inline-block;
	text-align: center;
    padding: 0.05rem 0;
    box-sizing: border-box;
}
.userVip-div .border-active{
	color: #4097FF;
    border-bottom: 2px solid #4097ff;
}
.userVip-main {
	width: 100%;
	height: 100%;
	padding-bottom: 0.5rem;
	overflow-y: auto;
}

.userVip-user-msg {
	width: 100%;
	height: 1.9rem;
	float:left;
	background: rgb(142,10,190);
}

.user-msg-img {
	width: 0.64rem;
	height: 0.64rem;
	margin: 0.15rem auto 0 auto;
}

.user-msg-img img {
	display: block;
	width: 100%;
}

.userVip-user-msg p {
	text-align: center;
	color: white;
	font-size: 0.14rem;
	padding: 0.1rem 0;
}

.user-vip-type {
	text-align: center;
	font-size: 0.14rem;
    color: white;
    font-weight: 600;
}

.user-vip-type a {
	display: inline-block;
	color: white;
	font-size: 0.14rem;
	font-weight: bold;
}
.user-btn-vip{
	text-align: center;
    font-size: 0;
    padding:0.1rem 0;
}
.user-btn-vip span {
	display: inline-block;
	font-size: 18px;
	padding: 5px 50px;
	border-radius: 30px;
	color: #ff933f;
	font-weight: bold;
	background-image: -webkit-linear-gradient( to top, #ffec95 0%, #ffd234 50%, #ffec95 100%);
	background-image: linear-gradient( to top, #ffec95 0%, #ffd234 50%, #ffec95 100%);
}
.userVip-banner{
	width: 100%;
	height: 1.27rem;
	float:left;
}
.userVip-banner img{
	display: block;
	width: 100%;
}
</style>
